<template>
  <div class="box">
    <div id="zhu_zhuang_tu_x" ref="zhuZhuangTuX" @click="clickChart"></div>

    <span class="unit" v-if="isShowUnit">单位: {{ unit }}</span>
  </div>
</template>

<script setup lang="js">
import * as echarts from "echarts"
import { ref, reactive, watch, onMounted } from 'vue'

const props = defineProps({
  value: Object,
  isShowUnit: null
})

const emit = defineEmits(['emitChartParams'])

const zhuZhuangTuX = ref(null)
const unit = ref('')
const options = reactive({
  title: {
    text: '',
    top: '',
    left: '40px',
    show: true,
    color: '#fff',
    fontSize: '30px'
  },
  grid: {
    left: "2%",
    right: "15%",
    top: "10%",
    bottom: "7%",
    containLabel: true,
  },
  legend: {},
  // 提示
  tooltip: {
    trigger: "item",
    show: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    data: [],
    name: '',
    splitLine: false,
    axisTick: {
      alignWithLabel: true, //柱状图中心是否对齐刻度位置
      show: false //不显示刻度
    },
    nameTextStyle: {
      color: "#fff",
      nameLocation: "start",
    },
    axisLabel: {
      show: false,
      color: "#fff",
      fontSize: 20
    }
  },
  yAxis: {
    type: "category",
    data: [],
    axisLabel: {
      show: true,
      color: "#fff",
      fontSize: 12,
      fontWeight: '500'
      // rotate: -45
    },
  },
  series: [
    {
      data: [],
      type: "bar",
      barGap: "100%",
      barCategoryGap: "200%",
      barWidth: 5,
      backgroundStyle: {
        color: '#fff',
        borderWidth: 1,
        borderColor: '#fff',
        borderType: 'solid',
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        opcity: 0.6
      },
      // 标签
      label: {
        show: true,
        position: "right",
        distance: 10,
        fontSize: 12,
        color: '#fff',
        fontWeight: 600,
        formatter: function (params) {
          return `{span|${params.value}}`
        },
        rich: {
          span: {
            color: '#fff',
            fontSize: '12px',
            fontWeight: '500',
            fontFamily: '',
            letterSpacing: '2px'
          }
        }
      },
      itemStyle: {
        // 渐变色
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0,
          [
            {
              offset: 0,
              color: "#4af5e7" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#c1fdf8" // 100% 处的颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0,160,221,1)",
        //模糊细数
        shadowBlur: 4
      },
    }
  ]
})

watch(() => props.value,
  (newVal, oldVal) => {
    unit.value = newVal.unit
    options.xAxis.data = newVal.y
    options.yAxis.data = newVal.x
    options.series[0].data = newVal.y

    if (newVal.x) {
      initChart()
    }
  },
  {
    deep: true,
    // immediate: true
  }
)

onMounted(() => {
  // initChart()
})

let timer;


function initChart() {
  let chart = echarts.init(zhuZhuangTuX.value);

  chart.on('click', params => {
    clickChart(params)
  })

  chart.setOption(options)
  // window.onresize = zhu_zhuang_tu_x.resize;
}

function clickChart(params) {
  emit('emitChartParams', params.data)
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

#zhu_zhuang_tu_x {
  width: 100%;
  height: 100%;
}

.unit {
  position: absolute;
  right: 10px;
  bottom: 0px;
  color: #fff;
  font-size: 14px;
}

.s {
  color: #c1fdf8;
}
</style>
